<template>
  <!--搜索联想组件-->
  <div class="graLenovo" v-if="gralist">
    <ul class="songs">
      <h5>单曲</h5>
      <li v-for="(val,index) in gralist.songs" :key="index" @click="skipGrabble('GrabbleType1',val.name)">
        {{val.name}}
        <span>-{{val.artists[0].name}}</span>
      </li>
    </ul>
    <ul class="artists" v-if="gralist.artists">
      <h5>歌手</h5>
      <li v-for="(val,index) in gralist.artists" :key="index" @click="skipGrabble('GrabbleType100',val.id)">{{val.name}}</li>
    </ul>
    <ul class="albums">
      <h5>专辑</h5>
      <li v-for="(val,index) in gralist.albums" :key="index" @click="skipGrabble('GrabbleType10',val.name)">
        {{val.name}}
        <span>-{{val.artist.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import require from "requests/grabble";
export default {
  naem: "graLenovo",
  data() {
    return {
      gralist: null
    };
  },
  props: ["keyWord"],
  methods: {
    googleSuggest(value) {
      require.googleSuggest(value).then(res => {
        this.gralist = res.data.result;
        //console.log(this.gralist);
      });
    },
    skipGrabble(path, val) {
      this.$router.push({
        name: path,
        query: {
          keyWord: val
        }
      });
    }
  },
  mounted() {
    this.googleSuggest(this.keyWord);
    this.skipGrabble()
  }
};
</script>

<style scoped lang='less'>
.graLenovo {
  ul {
    padding: 0;
    h5 {
      color: #999;
      cursor: pointer;
      margin: 5px 5px;
    }
    li {
      font-size: 14px;
      padding: 8px 10px;
      cursor: pointer;
      span {
        color: #31c27c;
      }
    }
    li:hover {
      background: #31c27c;
      color: #fff;
      span {
        color: #fff;
      }
    }
  }
}
</style>